Vue 项目配置

Vite 对 Vue 3 提供开箱即用支持，通过官方插件配置增强功能。

基础 Vue 配置

JavaScript

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

Vue JSX 支持

Bash

npm add -D @vitejs/plugin-vue-jsx

JavaScript

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vue(), vueJsx()]
})

Vue 插件选项

JavaScript

export default defineConfig({
  plugins: [
    vue({
      include: [/\.vue$/],
      isProduction: false,
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('x-')
        }
      }
    })
  ]
})

插件选项说明

选项	说明
include	匹配 Vue 文件
isProduction	是否生产模式
template.compilerOptions	模板编译选项
template.transformAssetUrls	资源 URL 转换

Vue JSX 配置

JavaScript

export default defineConfig({
  plugins: [
    vueJsx({
      // JSX 配置选项
      isCustomElement: (tag) => tag.startsWith('x-')
    })
  ]
})

自定义元素支持

JavaScript

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // 将 x- 开头的标签视为自定义元素
          isCustomElement: (tag) => tag.startsWith('x-')
        }
      }
    })
  ]
})

注意：Vue 3 默认支持单文件组件，无需额外配置。

Vue 项目依赖

Bash

npm add vue
npm add -D @vitejs/plugin-vue

Vue 单文件组件示例

vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

<style scoped>
button {
  color: blue;
}
</style>

要点总结

@vitejs/plugin-vue 支持 Vue 3
vueJsx 插件支持 JSX 写法
template.compilerOptions 自定义编译选项
isCustomElement 配置自定义元素